<template>
  <view class="login-page" :style="my_style">
    <view class="bg-box">
      <view class="flex-between u-text-center font-32">
        <text class="tab-item theme-color">登录</text>
        <text class="tab-item" @click="replaceJump('/views/login/register')">注册</text>
      </view>
      <text class="font-48 font-weight-500">Hi，请登录</text>
      <!-- 表单 -->
      <view class="u-m-t-24 form">
        <input
          type="number"
          maxlength="11"
          v-model="mobile"
          class="u-m-b-20"
          placeholder="请输入手机号"
        />
        <input
		style="background-color: #f5f5f5"
          type="password"
          maxlength="20"
          v-model="password"
          class="u-m-b-18"
          placeholder="请输入密码"
        />
        <view
          class="u-text-right tips-color font-24 lh-34 u-m-b-28"
          @click="jump('/views/login/forget_pwd')"
          >忘记密码？</view
        >
        <view class="primary-btn flex-center" @tap="$u.debounce(login, 2000, true)">确定</view>
        <u-checkbox v-model="is_agree" size="28" :active-color="theme_color" shape="circle">
          <text class="font-24 lh-34"
            >已阅读并同意
            <text
              class="theme-color"
              @tap.stop="jump('/views/login/protocol?tag=registeragreement')"
              >《服务协议》</text
            >和
            <text class="theme-color" @tap.stop="jump('/views/login/protocol?tag=privacypolicy')"
              >《隐私政策》</text
            ></text
          ></u-checkbox
        >
      </view>
    </view>
    <!-- #ifdef APP-PLUS -->
    <!-- 其他方式快捷登录 -->
    <view class="other-box">
      <view class="flex-between other-top light-color u-m-b-66">
        <view class="line"></view>
        <text>其他方式快捷登录</text>
        <view class="line"></view>
      </view>
      <view class="flex-center">
        <!-- 微信登录 -->
        <view class="flex-center fdc u-m-r-60" @click="wxLogin">
          <u-icon name="weixin-fill" size="48" color="#58bd6a" class="u-m-b-32"></u-icon>
          <text class="font-26 light-color lh-36">微信登录</text>
        </view>
        <!-- Apple登录 -->
        <view class="flex-center fdc" v-if="show_apple">
          <u-icon name="apple-fill" size="48" class="u-m-b-32"></u-icon>
          <text class="font-26 light-color lh-36">Apple登录</text>
        </view>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>
<script>
  import md5Libs from '@/utils/md5'
  export default {
    data() {
      return {
        active: 'login',
        is_agree: true,
        code: '', // 验证码
        confirm_password: '', // 确认密码
        mobile: '', // 用户手机号
        password: '', // 密码
        show_apple: false,
      }
    },
    onLoad(options) {
      // 先判断 系统版本
      const { platform, system } = uni.getSystemInfo()
      if (platform === 'ios' && system.indexOf('13.') > -1) {
        this.show_apple = true
      }
    },
    methods: {
      /**
       * 用户登录-账号密码
       */
      async login() {
        const { mobile, password, is_agree } = this
        if (!is_agree) {
          this.showMsg('请阅读并同意《服务协议》和《隐私政策》')
          return
        }
        let params = {
          mobile,
          password: md5Libs.md5(password),
          nonce: this.randomStr(10),
        }
        const res = await this.$api.common.user('login', params)
        if (res.code === 200) {
          const { access_token, client } = res.data
          uni.setStorageSync('access_token', access_token)
          uni.setStorageSync('member_id', client.member_id)
          this.successBack('登录成功')
        }
      },
      // 苹果登录
      appLogin() {
        let that = this
        if (!that.is_agree) {
          this.showMsg('请阅读并同意《服务协议》和《隐私政策》')
          return
        }
        uni.login({
          provider: 'apple',
          success(loginRes) {
            // 登录成功
            let iosopenid = loginRes.authResult.openid
            // 获取用户信息
            uni.getUserInfo({
              provider: 'apple',
              success(res) {
                let identityToken = res.userInfo.identityToken
                that.loginWithApple(identityToken)
              },
            })
          },
          complete() {
            uni.hideLoading()
          },
          fail() {
            // 登录失败
            that.showMsg('登录失败')
          },
        })
      },
      /**
       * 用户登录-苹果授权
       */
      async loginWithApple(identityToken) {
        let params = {
          identityToken,
          nonce: this.randomStr(10),
        }
        const res = await this.$api.common.user('loginWithApple', params)
        if (res.code === 200) {
          const { access_token, client } = res.data
          uni.setStorageSync('access_token', access_token)
          uni.setStorageSync('member_id', client.member_id)
          this.successBack('登录成功')
        }
      },
      // 微信登录
      wxLogin() {
        let that = this
        if (!that.is_agree) {
          this.showMsg('请阅读并同意《服务协议》和《隐私政策》')
          return
        }
        uni.login({
          provider: 'weixin',
          success(login_res) {
            console.log(login_res)
            that.loginWithWeopen(login_res)
          },
          complete() {
            uni.hideLoading()
          },
          fail(e) {
            that.showMsg('登录失败')
          },
        })
      },
      /**
       * 用户登录-APP微信授权
       */
      async loginWithWeopen(login_res) {
        let params = {
          appcode: login_res.authResult.code,
          nonce: this.randomStr(10),
        }
        const res = await this.$api.common.user('loginWithWeopen', params)
        if (res.code === 200) {
          const { access_token, client } = res.data
          uni.setStorageSync('access_token', access_token)
          uni.setStorageSync('member_id', client.member_id)
          if (!client.mobile) {
            uni.redirectTo({
              url: '/views/auth/bind_phone',
            })
          } else {
            this.back()
          }
        }
      },
      // 返回上一页
      back() {
        // 获取页面栈
        var pages = getCurrentPages()
        if (pages.length > 1) {
          // 上一个页面实例对象
          var prePage = pages[pages.length - 2]
          // 触发上个界面
        }
        this.goBack()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .login-page {
    min-height: 100vh;
    padding: 100rpx 20rpx 66rpx;
    background: $uni-bg-color;

    .bg-box {
      width: 100%;
      height: 720rpx;
      padding: 28rpx 86rpx 40rpx;
      margin-bottom: 118rpx;
      // background: url('../static/login/img_denglu@3x.png');
      background-size: 100% 100%;
    }

    .tab-item {
      width: 50%;
      height: 100rpx;
      line-height: 100rpx;
      color: #666;
    }

    .form {
      input {
        height: 88rpx;
        border-bottom: 1px solid #ececec;
      }
    }

    .theme-color {
      color: var(--color);
    }

    .primary-btn {
      width: 100%;
      height: 88rpx;
      font-size: 34rpx;
      color: #fff;
      background: var(--color);
      border-radius: 8rpx;
    }

    // 其他方式快捷登录
    .other-box {
      .other-top {
        padding: 0 52rpx;

        .line {
          width: 150rpx;
          height: 2rpx;
          background: #e1e1e1;
        }
      }
    }
  }
</style>
